Professional Documents
Culture Documents
Muhammad Syafiq
29 January 2008
Acknowledgements & License
License
This document is released under the Joomla! Electronic Documentation License
Acknowledgements
I would like to pass on my thanks to Amy Stephen, Chad, Chris Davenport,
Shantanubala and all the people that help me.
Thanks
Muhammad Syafiq
Table of Contents
Introduction........................................................... 4
Example................................................................ 4 – 5
Class Suffix?.......................................................... 6
Module Class Suffix............................................. 6
Page Class Suffix............................................... 7
Menu Class Suffix............................................... 8
Thing to be Considered................................................. 9
Conclusion/Summary..................................................... 10
Introduction
Joomla! Version 1.5 Class Suffix is the easiest way to modify Joomla!’s style. It is impossible for us to find
one module and styling the module in the same directory like we used to do in simple html sites. All the
styling is done inside the template.css file which is located inside the template directory.
As example, for Windows users, the directory is \templates\rhuk_milkyway\css\template.css, which
rhuk_milkway is my template name.
I am using rhuk_milkway as my template. Other templates may have different settings.
First let’s see an example.
1. As example, we are going to
modify the polls module.
2. Type “_pollstyle1” inside the
module class suffix.
To go here, click Module Manager
under Extensions tab. After that
click on polls module.
3. Now add this code inside
template.css anywhere you want. I
add this codes at the end of the
line of the template.css file and
comment it “/*customstyle*/”
div.moduletable_pollstyle1
td{
/*content */
color: #FF0000;
font‐family: Arial,
Helvetica, sans‐serif;
text‐align: left;
font‐style: italic;
}
div.moduletable_pollstyle1
h3{
Add the highlighted code inside template.css. The
/*title */
file is located inside \templates\rhuk_milkway
color: #FF0000;
\css\template.css.
text‐align: left;
font‐style: italic;
}
We add the same suffix that we used inside the
polls module class suffix “_pollstyle1” to the
div.moduletable class.
Remember: the class suffix you are adding must
be exactly the same as the class suffix in the
module manager. div.moduletable_pollstyle1 is
not the same as div.moduletable pollstyle1 or
div.moduletable _pollstyle1 .
Now save the template file and refresh your
browser. It should look like the image on the right.
So what is Joomla! Class Suffix?
As you see, all the design is done inside the template.css. Since Joomla! is a complex web application, it
will be hard for us to do styling in Joomla!. That’s why we use this because it saves us time to do some
individual styling rather find it on your own inside the template.css file and modify it.
You save a lot of time by adding a suffix there, and make a new code to the template.css file.
Joomla! Module Class Suffix
Module Class Suffix is used in styiling the modules. As an example, we are going to do some styling on
the Main Menu module.
1. Let see one more example. Now
we are going to modify main
menu module.
2. In admin page, go to extension
tab and click at module
manager. Then, find the main
menu module there. Click the
module.
3. Type _style1 module in the
Module Class Suffix box
Then open the template.css inside /templates/rhuk_milkway/css directory with text editor like notepad.
Find “/* module control elements */” comment. (You also can paste it at the end of the template.css
codes, and comment it /*customstyle*/)
1. Modify it by adding these statements: 2. Now refresh your browser. It should look
like the below image.
div.module_style1 {
font‐family: Courier;
font‐size: 13px;
font‐weight: bold;
color: #c393a2;
text‐transform: capitalize;
text‐align: left;
}
div.module_style1 h3 {
font‐family: Courier;
color: #c393a2;
}
Joomla! Page Class Suffix
Joomla! Page Class Suffix works when we want to do some styling to the content. In this example we are
going to do some simple styling on Joomla! 1.5 Overview heading.
1. To see the content before the
styling is applied, click on the
'Joomla! Overview' link.
2. In the admin page, click on the
menu tab. Select Menu Manager.
Then click Joomla! Overview.
3. Type “‐overview” inside the Page
Class Suffix box.
4. You should see this by using
Firefox Web Developer plugin in
the Joomla! Overview page.
5. Then paste the code into the .contentheading‐overview
template.css file. We are going to {
modify the heading only. background: #CCFF33;
font‐family: "Agency FB";
}
6. The result
The same
goes to the
contentpaneopen‐overview, if you want to modify the style of the whole content.
Joomla! Menu Class Suffix
The last class suffix in Joomla! Is Menu Class Suffix. This time we are going to do some styling on the Key
Concept menu.
By now you should be at least familiar with the admin page. By going to module manager under
extensions tab, click on Key Concepts module. Type “‐horizontal” inside Menu Class Suffix box.
Then, go to Firefox and find
out what you want to do by
using Firefox Web
Developer plugin.
Remember, we are not going to change the module. So ignore the .module_menu.
After that, copy and paste this code inside the template.css file.
.menu‐horizontal .item38
{
border: thin #FF0000 groove;
}
And the result is:
If you do “.menu‐horizontal.item38” instead of “.menu‐horizontal .item38”, the result is nothing. So
make sure of the space in front of .item38. If you do .menu‐horizontal, the border will change wraps the
entire link there.
Menu Class Suffix is useful when you don’t want to change the entire module. In this example, if we
use .module_menu (default module suffix), the blue wrap will gone (it also will affect the menu modules
that use the same suffix).
Things to be considered
1. Now, can you tell what the big difference between these 2 codes is?
div.module_style1 div.moduletable_pollstyle1 td
{ {/*content */
font‐family: Courier; color: #FF0000;
font‐size: 13px; font‐family: Arial, Helvetica, sans‐serif;
font‐weight: bold; and text‐align: left;
color: #c393a2; font‐style: italic;
text‐transform: capitalize; }
text‐align: left;
}
The former doesn’t have a table, but the latter has a table beside the module (notice the bold). You may
ask why I wrote different classes. But since it is different we have to specify it correctly. This is very
crucial things to consider when we going to do some styling to different module. Luckily Mozilla Firefox
has Web Developer extension that can tell us what the module’s class is. We already used it a lot in the
previous example.
Notice div.module_menu 24 (ignore the number) there. This tells us what class we should modify inside
template.css.
2. Add the suffix properly. Remember if the suffix is style2 in template.css file, you must exactly enter
like modulesuffix or moduletablesuffix. In this case, enter it modulestyle2 or moduletablestyle2.
Trimming or spacing to the suffix will make no change to the classes.
3. If you want to do a single menu styling, follow the class
information exactly from the Firefox Web Developer plugin. As example in
the picture, if you want to change the Joomla! Home link, type
“.menu .item11 {…}” and not “.menu.item11 {…}”.
Conclusion
Joomla! Class Suffix did an awesome job in styling modules. Other than finding the required module
itself from the directory, we just added the suffix inside the required module manager and coded it
inside the template.css file. Class Suffixes also help us modify specific modules, like what we did to the
main menu module. In conclusion, Class Suffixes save us time in styling the required modules, menus
and pages.
Summary